<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container home">
    <div :style="{ backgroundImage: 'url(\'https://pic1.zhimg.com/v2-1f713db7d4f71474b387fad0d7936580_r.jpg\')' }"
         class="imgs">
      <!--头部分-->
      <el-row :gutter="30">
        <el-col :lg="24">
          <el-carousel interval:3000 :height="bannerHeight+'px'" type="card">
            <el-carousel-item v-for="item in urlList" :key="item.id">
              <img class="imgs" :src="item.url" alt="暂无图片">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      <!--中间部分-->
      <el-row :gutter="20">
        <el-col :lg="12" style="padding-left: 2%">
          <div class="background-text">
            <h2>物联网实验室后台管理系统</h2>
            <p>
              <b>当前版本:</b> <span>v{{ version }}</span>
            </p>
            <el-button @click="drawer = true" type="primary" style="margin-left: 10px;">技术类型</el-button>
            <el-button type="primary" icon="el-icon-search">
              <a href="https://www.baidu.com">百度一下</a>
            </el-button>
          </div>
        </el-col>
        <!--      倒计时模块-->
        <el-col :lg="12" style="margin-top: 2%">
          <div class="background-text" style="margin-left: 18%;color: #FFFFFF">
            <span style="color: #FFFFFF; margin-left: 45%">今天还剩:</span>
            <el-statistic
              ref="statistic"
              @finish="hilarity"
              format="HH:mm:ss"
              :value="deadline4"
              :value-style="{ color: '#FFFFFF' }"
              time-indices
            >
            </el-statistic>

          </div>
        </el-col>
        <!--      技术类型-->
        <div>
          <el-drawer
            title=""
            :visible.sync="drawer"
            :with-header="false">
            <div style="line-height: normal">
              <el-col :span="18">
                <h2>后端技术</h2>
                <ul style="font-size: 18px">
                  <el-link href="https://spring.io/projects/spring-boot" type="primary">SpringBoot</el-link>
                  <br>
                  <el-link href="https://spring.io/projects/spring-security" type="primary">Spring Security</el-link>
                  <br>
                  <el-link href="https://jwt.io/" type="primary">JWT</el-link>
                  <br>
                  <el-link href="https://mybatis.net.cn/" type="primary">MyBatis</el-link>
                  <br>
                  <el-link href="https://druid.apache.org/" type="primary">Druid</el-link>
                  <br>
                  <el-link href="https://alibaba.github.io/fastjson2/" type="primary">Fastjson</el-link>
                  <br>
                </ul>
                <br>
                <h2>前端技术</h2>
                <ul style="font-size: 18px">
                  <el-link href="https://cn.vuejs.org/" type="primary">Vue</el-link>
                  <br>
                  <el-link href="https://vuex.vuejs.org/zh/guide/" type="primary">Vuex</el-link>
                  <br>
                  <el-link href="https://element.eleme.cn/#/zh-CN" type="primary">Element-ui</el-link>
                  <br>
                  <el-link href="https://www.axios-http.cn/" type="primary">Axios</el-link>
                  <br>
                  <el-link href="https://www.sass.hk/" type="primary">Sass</el-link>
                  <br>
                  <el-link href="https://quilljs.com/" type="primary">Quill</el-link>
                  <br>
                </ul>
              </el-col>
            </div>
          </el-drawer>
        </div>
      </el-row>
      <br>
      <!--    末端部分-->
      <el-row :gutter="30" style="margin-top: 1% ">
        <el-col :lg="24">
          <div class="card-style">
            <div style="margin-left: -85%">
              <div slot="header" class="clearfix">
                <span>物联网实验室</span>
              </div>
              <p>
                <i class="el-icon-s-home"></i> 地点：2508
              </p>
              <p>
                <i class="el-icon-user"></i> 物联网实验室-服务器出品
              </p>
              <p>
                <i class="el-icon-phone"></i>联系电话：18761029163
              </p>
            </div>
            <!--            天气信息-->
            <div v-if="weatherData" style=" margin-top:-9% ;margin-left: 60%">
              <p>
                <i class="el-icon-location-outline"></i> 城市：{{ weatherData.city }}
              </p>
              <p>
                <i class="el-icon-loading"></i> 天气：{{ weatherData.weather }}
              </p>
              <p>
                <i class="el-icon-key"></i> 温度：{{ weatherData.temperature }}℃
              </p>
              <p>
                <i class="el-icon-wind-power"></i> 风向：{{ weatherData.windDirection }}
              </p>
              <p>
                <i class="el-icon-coin"></i> 风力：{{ weatherData.windPower }}
              </p>
            </div>
            <div v-else>
              <p>正在加载天气信息...</p>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-divider/>
    </div>
  </div>
</template>

<script>
import mainJs from "@/api/wlwsys/mainpage/main";

export default {
  name: "Index",
  data() {
    return {
      //天气相关
      weatherData: null,
      //倒计时相关
      deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
      picList: "",
      // 版本号
      version: "1.0.0",
      //el-carousel设置容器高度
      bannerHeight: 0,
      //浏览器高度
      screenWidth: 0,
      //抽屉默认关闭
      drawer: false,
      //轮播图
      urlList: [
        {
          id: 0,
          url: 'http://192.168.3.200:9090/picture/2023/06/02/background1.jpg'
        },
        {
          id: 1,
          url: 'http://192.168.3.200:9090/picture/2023/06/02/background2.jpg'
        },
        {
          id: 2,
          url: 'http://192.168.3.200:9090/picture/2023/06/02/background3.jpg'
        },
        {
          id: 3,
          url: 'https://pic4.zhimg.com/v2-282988ce3bb3cb0cfeaec7db9a9aa60b_r.jpg'
        },
        {
          id: 4,
          url: 'https://pic1.zhimg.com/v2-385cdcbadb8fd8b84c2e2896dc64d204_r.jpg'
        }
      ],
    };
  },
  created() {
    // this.getPic();
  },
  mounted() {
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth
    this.bannerHeight = 300 / 1780 * this.screenWidth
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth
      this.bannerHeight = 300 / 1780 * this.screenWidth
    }
    //天气模块
    this.getWeatherData()
  },
  methods: {
    //天气模块
    getWeatherData() {
      const url = "https://restapi.amap.com/v3/weather/weatherInfo";
      const key = "b62e7d3da3ecc79fed72a36d2c866fc1";
      const city = "衡阳";
      const output = "JSON";
      fetch(`${url}?key=${key}&city=${city}&output=${output}`)
        .then(response => response.json())
        .then(data => {
          const weather = data.lives[0];
          console.log(weather);
          this.weatherData = {
            city: weather.city,
            weather: weather.weather,
            temperature: weather.temperature,
            windDirection: weather.winddirection,
            windPower: weather.windpower
          };
        })
        .catch(error => {
          console.error(error);
        });
    },

    //倒计时模块
    hilarity() {
      this.$notify({
        title: '提示',
        message: '时间已到，你可知寸金难买寸光阴？',
        duration: 0,
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getPic() {
      mainJs.getPic().then(result => {
        this.picList = result.data
      })
    },
  }
};
</script>

<style scoped lang="scss">
.imgs {
  width: 100%;
  height: inherit;
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.card-style {
  color: white;
  border: 0px;
  border-radius: 20px;
  //背景透明度
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: rgba(0, 0, 0, 0) 2px 8px 8px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  //背景模糊度
  backdrop-filter: blur(1.6px);
  margin: 10px 20px 10px 20px;
}

.background-text {
  color: white;
  //背景透明度
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: rgba(0, 0, 0, 0) 2px 8px 8px;
  //背景模糊度
  backdrop-filter: blur(1.6px);
  margin: 10px 20px 10px 20px;
}
</style>

